<template>
	<div class="bodyBox">
		<div class="content">
			<div class="header">
				<!-- <u-avatar :src="avatarSrc"></u-avatar>
				<div class="input">
					<u--input confirm-type="search" placeholder="search" prefixIcon="search"
						prefixIconStyle="font-size: 22px;color: #fff" color="#ffffff"
						placeholder-style="color:#fff"></u--input>
				</div> -->
				<!-- 搜索框 -->
				<view class="search-container">
					<!-- <u-avatar :src="avatarSrc" class="avatar-style" alt="logo"></u-avatar> -->
					<image :src="avatarSrc" class="avatar-style" alt="logo"></image>
					<view class="search">
						<up-search :placeholder="$t('searchPlaceholder')" :show-action="false" :clearabled="true"
							bgColor="rgba(187,187,187,0.3)" borderColor="rgba(187,187,187,0.3)"
							placeholder-color="#FFFFFF" search-icon-color="#FFFFFF" height="1.7rem" :disabled="true"
							@click="goSearchPage('square')"
							style="background-color: rgba(187,187,187,0.8);border-radius: 64rpx;"></up-search>
					</view>
				</view>
			</div>
			<u-tabs :scrollable="false" lineWidth="150rpx" lineColor="#2F2425" :list="list1"
				itemStyle="padding-left: 1px; padding-right: 1px; height: 58rpx;" @click="tabsClick"></u-tabs>
		</div>
		<div style="width: 100%;height: calc(145rpx + 2rem);"></div>
		<scroll-view class="bodyList" scroll-y refresher-enabled :refresher-triggered="triggered"
			@refresherrefresh="onRefresh">
			<up-list @scrolltolower="getFashionplay(tabsData)" v-if="tabsData === $t('found')">
				<div class="window1" v-if="listData.length > 0">
					<div class="listItem" v-for="(item, index) in listData" :key="index"
						@click="selectItem(tabsData, index)">
						<div class="imgBox">
							<image class="image" mode="aspectFill" :src="item.funplay_urls[0]" alt="" />
						</div>
						<span class="text">{{ item.funplay_title ? item.funplay_title : '-' }}</span>
						<div class="liteFootle">
							<image class="fontImg" src="@/static/images/xin.png" alt="" />
							<span>{{ formatToWan(item.likes) }}</span>
							<span class="liteTitle">{{ item.user_name }}</span>
						</div>
					</div>
					<div class="listFootle">
						<span v-if="listLogin">{{ $t('loadingMore') }}</span>
						<!-- <span v-else>{{ $t('noMore') }}</span> -->
					</div>
				</div>
				<view v-else>
					<div class="noLike">
						<image class="noLikeImg" src="@/static/images/logo.png" alt="" />
						<span>{{ $t('Thereisnomovement') }}</span>
						<!-- <span class="goHome">{{ $t('lookothermodules') }}</span> -->
					</div>
				</view>
			</up-list>
			<up-list @scrolltolower="getFashionplay2(tabsData)" v-if="tabsData === $t('dynamic')">
				<div class="window1" v-if="listData2.length > 0">
					<!-- :style="{ height: index % 2 === 0 ? '16.1875rem' : 'calc(16.1875rem + 1rem)' }" -->
					<div class="listItem" v-for="(item, index) in listData2" :key="index"
						@click="selectItem(tabsData, index)">
						<div class="imgBox">
							<image class="image" mode="aspectFill" :src="item.funplay_urls[0]" alt="" />
						</div>
						<span class="text">{{ item.funplay_title ? item.funplay_title : '-' }}</span>
						<div class="liteFootle">
							<image class="fontImg" src="@/static/images/xin.png" alt="" />
							<span>{{ formatToWan(item.likes) }}</span>
							<span class="liteTitle">{{ item.user_name }}</span>
						</div>
					</div>
					<div class="listFootle">
						<span v-if="listLogin2">{{ $t('loadingMore') }}</span>
						<!-- <span v-else>{{ $t('noMore') }}</span> -->
					</div>
				</div>
				<view v-else>
					<div class="noLike">
						<image class="noLikeImg" src="@/static/images/logo.png" alt="" />
						<span>{{ $t('Thereisnomovement') }}</span>
						<!-- <span class="goHome">{{ $t('looklookUser') }}</span> -->
					</div>
				</view>
			</up-list>
		</scroll-view>
		<my-tabbar :tabbarData="0"></my-tabbar>
	</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import myTabbar from '@/components/myTabbar.vue'
import { fashionplay, dynamic } from '@/api/index/index'
import { onPullDownRefresh, onLoad, onShow, onUnload } from '@dcloudio/uni-app'
import { formatToWan } from '@/utils/numericalToW'
import { getFull } from '@/api/meApi/me.js'
import { useI18n } from 'vue-i18n'
import { useDetails } from '@/stores/details';
const details = useDetails();
const { t } = useI18n()
const avatarSrc = ref('/static/images/logo.png')
function getAvatar() {
	getFull().then(res => {
		avatarSrc.value = res.data.avatarUrl
	})
}
const list1 = ref([{ name: t('found') }, { name: t('dynamic') },])
// 监听语言变化（假设你的国际化库有语言变化事件）
watch(() => t('found'), () => {
	list1.value = [
		{ name: t('found') },
		{ name: t('dynamic') }
	]
	tabsData.value = t('found')
})
let listData = ref([])
const page = ref(1)  // 当前页码‌
const page2 = ref(1)
let listData2 = ref([])
const listLogin = ref(false)
const listLogin2 = ref(false)
const tabsData = ref(t('found'))
const tabsClick = (item: any) => {
	tabsData.value = item.name;
	if (item.name == t('found')) {
		getFashionplay(t('found'), 1)
	} else if (item.name == t('dynamic')) {
		getFashionplay2(t('dynamic'), 1)
	}
}
const triggered = ref(false)
const onRefresh = () => {// 下拉刷新函数
	// console.log('触发下拉刷新')
	triggered.value = true
	page.value = 1
	page2.value = 1
	// #ifndef H5
	plus.storage.removeItem('indexData') // 清除缓存
	plus.storage.removeItem('indexNum') // 清除缓存
	plus.storage.removeItem('indexValue') // 清除缓存
	// #endif
	getFashionplay('1', 1)
	getFashionplay2('1', 1)
	// setTimeout(() => {
	// 	triggered.value = false;
	// 	uni.stopPullDownRefresh();// 关闭下来刷新动画效果
	// }, 1000);
}
onPullDownRefresh(() => {// 下拉刷新
	page.value = 1
	page2.value = 1
	// #ifndef H5
	plus.storage.removeItem('indexData') // 清除缓存
	plus.storage.removeItem('indexNum') // 清除缓存
	plus.storage.removeItem('indexValue') // 清除缓存
	// #endif
	getFashionplay('1', 1)
	getFashionplay2('1', 1)
	setTimeout(() => {
		uni.stopPullDownRefresh();// 关闭下来刷新动画效果
	}, 1000);
})
const itemIndex = ref(null)
const selectItem = (text: string, index: number) => {// 跳转页面
	itemIndex.value = index
	if (tabsData.value == t('found')) {
		// #ifndef H5
		plus.storage.setItem('indexData', JSON.stringify(listData.value)) // 储存信息
		plus.storage.setItem('indexNum', JSON.stringify(index)) // 储存信息
		plus.storage.setItem('indexValue', JSON.stringify(page.value)) // 储存信息
		uni.navigateTo({
			// url: `/pages/index/scrollChart?forget=${item.funplay_code}`// 带帖子code跳转
			url: `/pages/index/scrollChart?name=${1}`
		})
		// #endif
		// #ifdef H5
		// console.log('listData.value', listData.value);

		uni.navigateTo({
			// url: `/pages/index/scrollChart?forget=${item.funplay_code}`// 带帖子code跳转
			url: `/pages/index/scrollChart?forget=${encodeURIComponent(JSON.stringify(listData.value))}&num=${index}&page=${page.value}&name=${1}`// 带列表数据跳转
		})
		// #endif
	} else if (tabsData.value == t('dynamic')) {
		// #ifndef H5
		plus.storage.setItem('indexData', JSON.stringify(listData2.value)) // 储存信息
		plus.storage.setItem('indexNum', JSON.stringify(index)) // 储存信息
		plus.storage.setItem('indexValue', JSON.stringify(page2.value)) // 储存信息
		uni.navigateTo({
			// url: `/pages/index/scrollChart?forget=${item.funplay_code}`// 带帖子code跳转
			url: `/pages/index/scrollChart?name=${2}`
		})
		// #endif
		// #ifdef H5
		uni.navigateTo({
			// url: `/pages/index/scrollChart?forget=${item.funplay_code}`// 带帖子code跳转
			url: `/pages/index/scrollChart?forget=${encodeURIComponent(JSON.stringify(listData2.value))}&num=${index}&page=${page2.value}&name=${2}`// 带列表数据跳转
		})
		// #endif
	}
}
// 获取数据
const getFashionplay = (data: string, index: number) => {
	if (listLogin.value) return;
	listLogin.value = true
	if (index) {
		page.value = 1
		listData.value = []
	} else {
		page.value++
	}
	// console.log('获取数据');
	fashionplay(page.value).then((res: object) => {
		// console.log('res', res.data)
		if (res.code == 200) {
			if (!res.data) {
				page.value--
				uni.showToast({
					title: `${t('Intheend')}`,
					icon: 'none',
					duration: 2000
				})
				return
			}
			listData.value.push(...res.data)
		} else {
			uni.showToast({
				title: `${res.msg}`,
				icon: 'none',
				duration: 2000
			})
			page.value--
		}
	}).catch((err: object) => {
		// uni.showToast({
		// 	title: `${err.msg}`,
		// 	icon: 'none',
		// 	duration: 2000
		// })
	}).finally(() => {
		listLogin.value = false
		triggered.value = false;
		uni.stopPullDownRefresh();// 关闭下拉刷新动画效果
	})
}
// 获取数据2
const getFashionplay2 = (data: string, index: number) => {
	if (listLogin2.value) return;
	listLogin2.value = true
	if (index) {
		page2.value = 1
		listData2.value = []
	} else {
		page2.value++
	}
	dynamic(page2.value).then((res: object) => {
		if (res.code == 200) {
			if (!res.data) {
				page2.value--
				uni.showToast({
					title: `${t('Intheend')}`,
					icon: 'none',
					duration: 2000
				})
				return
			}
			listData2.value.push(...res.data)
		} else {
			uni.showToast({
				title: `${res.msg}`,
				icon: 'none',
				duration: 2000
			})
			page2.value--
		}
	}).catch((err: object) => {
		// uni.showToast({
		// 	title: `${err.msg}`,
		// 	icon: 'none',
		// 	duration: 2000
		// })
	}).finally(() => {
		listLogin2.value = false
		triggered.value = false;
		uni.stopPullDownRefresh();// 关闭下拉刷新动画效果
	})
}
function isEmptyObject(obj) {
	return Object.keys(obj).length === 0;
}
onShow(() => {
	// getUserData()
	getAvatar()  //获取头像
	uni.$on('isDel', function (data) {
		// console.log('监听到事件来自 isDel ，携带参数为：', data);
		// #ifndef H5
		plus.storage.removeItem('indexData') // 清除缓存
		plus.storage.removeItem('indexNum') // 清除缓存
		plus.storage.removeItem('indexValue') // 清除缓存
		// #endif
		getFashionplay(t('found'), 1)
		getFashionplay2(t('dynamic'), 1)
	})
	// #ifndef H5
	let indexData = JSON.parse(plus.storage.getItem('indexData'))
	// let indexNum = JSON.parse(plus.storage.getItem('indexNum'))
	let indexValue = JSON.parse(plus.storage.getItem('indexValue'))
	if (indexData) {
		listData.value = indexData
	}
	// if (indexNum) {
	// 	itemNum.value = indexNum
	// }
	if (indexValue) {
		page.value = indexValue
	}
	// #endif
	// console.log(11111, listData.value[details.itemIndex], details.itemData2);
	// if (!isEmptyObject(details.itemData2)) {

	// 	// if (tabsData.value == t('found')) {
	// 	// 	listData.value[details.itemIndex] = details.itemData2
	// 	// } else if (tabsData.value == t('dynamic')) {
	// 	// 	listData2.value[details.itemIndex] = details.itemData2
	// 	// }
	// 	setTimeout(() => {
	// 		details.setItemData2({})
	// 	}, 300)
	// }
})
// #ifndef H5
let indexData = JSON.parse(plus.storage.getItem('indexData'))
// let indexNum = JSON.parse(plus.storage.getItem('indexNum'))
let indexValue = JSON.parse(plus.storage.getItem('indexValue'))
if (indexData) {
	if (tabsData.value == t('found')) {
		listData.value = indexData
	} else {
		listData2.value = indexData
	}
}
// if (indexNum) {
// 	itemNum.value = indexNum
// }
if (indexValue) {
	page.value = indexValue
}
// #endif
onLoad((options: any) => {
	// #ifndef H5
	plus.storage.removeItem('indexData') // 清除缓存
	plus.storage.removeItem('indexNum') // 清除缓存
	plus.storage.removeItem('indexValue') // 清除缓存
	// #endif
	uni.hideTabBar()//  隐藏底部导航栏
})

onMounted(() => {
	getFashionplay(t('found'), 1)
})
onUnload(() => {
	// #ifndef H5
	plus.storage.removeItem('indexData') // 清除缓存
	plus.storage.removeItem('indexNum') // 清除缓存
	plus.storage.removeItem('indexValue') // 清除缓存
	// #endif
	uni.hideLoading(); // 关闭加载中提示
})
function goSearchPage(page: string) {
	uni.navigateTo({
		url: `/pages/search/searchHome?page=${page}`
	})
}
</script>
<style lang='scss' scoped>
.bodyBox {
	width: 100%;
	height: 100vh;
	position: relative;

	.content {
		width: 100%;
		background-image: url('https://t.tutu.to/img/Ikjak');
		background-size: cover;
		/* 背景图片按比例缩放以覆盖整个容器 */
		background-position: center;
		/* 背景图片居中显示 */
		background-repeat: no-repeat;
		/* 背景图片不重复 */
		overflow-y: auto;
		position: fixed;
		top: 0;
		// padding-top: var(--status-bar-height);
		padding-top: 2rem;
		z-index: 999;

		/* .u-avatar {
				margin-left: 20rpx;
			}
			.input {
				width: 78%;
				margin-left: 30rpx;

				::v-deep .u-input {
					border-radius: 15px;
					background-color: #d6cac3;
				}
			} */
		.search-container {
			display: flex;
		}

		.avatar-style {
			margin: 0.6rem 0 0 0.8rem;
			width: 2.2rem;
			height: 2.2rem;
			line-height: 2.2rem;
			border-radius: 50%;
			z-index: 3;
		}

		.search {
			position: relative;
			margin: 0.83rem 0 0 0.5rem;
			width: 80%;
			height: 1.94rem;
			z-index: 3;
			/* #ifdef  MP-WEIXIN*/
			width: 8.5rem;
			/* #endif*/
		}

		.icon-camera {
			position: absolute;
			top: 0.2rem;
			right: 0.7rem;
			width: 1.5rem;
			height: 1.5rem;
		}

	}

	::v-deep .u-tabs {
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, #e1e4e9, #FFEEE7);
	}

	::v-deep .u-tabs__wrapper {
		background-color: #EAB3B8;
		border-radius: 15px 15px 0 0;
	}
}

.bodyList {
	width: 100%;
	height: calc(100vh - 295rpx);
	background-color: #EAB3B8;
	// overflow-y: auto;

	::v-deep .u-list {
		width: 100%;
		height: 100% !important;
	}

	.window1 {
		width: 98%;
		margin: 0 auto;
		// display: flex;
		// flex-wrap: wrap;
		// justify-content: space-between;

		.listItem {
			width: 49%;
			height: 17.8rem;
			display: inline-block;
			margin: 12rpx 0.5% 0;
			background-color: #fff;
			border-radius: 10px;
			animation: listItem 0.5s ease-out;

			.imgBox {
				width: 11.27rem;
				height: 13rem;
				border-radius: 10px 10px 0 0;
				overflow: hidden;
				// border: 1px solid #ccc;

				.image {
					width: 100%;
					height: 100%;
				}
			}

			.text {
				width: 98%;
				height: 2rem;
				line-height: 1rem;
				margin-left: 2%;
				margin-top: .65rem;
				font-size: 28rpx;
				overflow: hidden;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				line-clamp: 2;
			}

			.liteFootle {
				width: 96%;
				margin-top: 20rpx;
				margin-left: 1%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;

				.fontImg {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}

				.liteTitle {
					width: 57%;
					text-align: right;
					// font-size: .85rem;
					font-size: 24rpx;
					// color: #707070;
					display: -webkit-box;
					overflow: hidden;
					margin-left: auto;
					word-break: break-all;
					text-overflow: ellipsis;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					line-clamp: 1;
				}
			}

			.avatar-style {
				margin: 0.6rem 0 0 0.8rem;
				width: 2.2rem;
				height: 2.2rem;
				line-height: 2.2rem;
				border-radius: 50%;
				z-index: 3;
			}

			.search {
				position: relative;
				margin: 0.83rem 0 0 0.5rem;
				width: 80%;
				height: 1.94rem;
				z-index: 3;
				/* #ifdef  MP-WEIXIN*/
				width: 8.5rem;
				/* #endif*/
			}

			.icon-camera {
				position: absolute;
				top: 0.2rem;
				right: 0.7rem;
				width: 1.5rem;
				height: 1.5rem;
			}

		}

		::v-deep .u-tabs {
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, #e1e4e9, #FFEEE7);
		}

		::v-deep .u-tabs__wrapper {
			background-color: #EAB3B8;
			border-radius: 15px 15px 0 0;
		}
	}

	.noLike {
		width: 80%;
		margin: 0 auto;
		padding-top: 100rpx;
		text-align: center;
		display: flex;
		flex-direction: column;

		.noLikeImg {
			width: 200rpx;
			height: 200rpx;
			margin: 0 auto;
		}

		span {
			display: inline-block;
		}

		.goHome {
			color: #6C6C6C;
			margin-top: 20rpx;
			font-size: 30rpx;
		}
	}

	.bodyList {
		width: 100%;
		height: calc(100vh - 295rpx);
		background-color: #EAB3B8;
		// overflow-y: auto;

		::v-deep .u-list {
			width: 100%;
			height: 100% !important;
		}

		// .window1 {
		// 	width: 98%;
		// 	margin: 0 auto;
		// 	// display: flex;
		// 	// flex-wrap: wrap;
		// 	// justify-content: space-between;

		// 	.listItem {
		// 		width: 49%;
		// 		height: 16.1875rem;
		// 		display: inline-block;
		// 		margin: 12rpx 0.5% 0;
		// 		background-color: #fff;
		// 		border-radius: 10px;
		// 		animation: listItem 0.5s ease-out;

		// 		.imgBox {
		// 			width: 11.27rem;
		// 			height: 13rem;
		// 			border-radius: 10px 10px 0 0;
		// 			position: relative;
		// 			overflow: hidden;

		// 			.image {
		// 				width: 100%;
		// 				position: absolute;
		// 				top: 50%;
		// 				left: 50%;
		// 				transform: translate(-50%, -50%);
		// 			}
		// 		}

		// 		.text {
		// 			width: 98%;
		// 			height: 1rem;
		// 			// min-height: 1rem;
		// 			// max-height: 1rem;
		// 			margin-left: 2%;
		// 			display: -webkit-box;
		// 			font-size: 24rpx;
		// 			font-weight: bold;
		// 			-webkit-line-clamp: 1; // 这里是关键，设置显示的行数
		// 			-webkit-box-orient: vertical;
		// 			overflow: hidden;
		// 			text-overflow: ellipsis;

		// 		}
		// 	}

		// 	@keyframes listItem {
		// 		from {
		// 			transform: translateY(100%);
		// 			opacity: 0;
		// 		}

		// 		to {
		// 			transform: translateY(0);
		// 			opacity: 1;
		// 		}
		// 	}

		// 	::v-deep .u-tabs {
		// 		width: 100%;
		// 		height: 100%;
		// 		background: linear-gradient(90deg, #e1e4e9, #FFEEE7);
		// 	}

		// 	::v-deep .u-tabs__wrapper {
		// 		background-color: #EAB3B8;
		// 		border-radius: 15px 15px 0 0;
		// 	}
		// }

		.noLike {
			width: 80%;
			margin: 0 auto;
			padding-top: 100rpx;
			text-align: center;
			display: flex;
			flex-direction: column;

			.noLikeImg {
				width: 200rpx;
				height: 200rpx;
				margin: 0 auto;
			}

			span {
				display: inline-block;
			}

			.goHome {
				color: #6C6C6C;
				margin-top: 20rpx;
				font-size: 30rpx;
			}
		}

		.bodyList {
			width: 100%;
			height: calc(100vh - 310rpx);
			background-color: #EAB3B8;
			// overflow-y: auto;

			.window1 {
				width: 98%;
				margin: 0 auto;

				.listItem {
					width: 49%;
					height: 550rpx;
					display: inline-block;
					margin: 0 0.5%;
					background-color: #fff;
					border-radius: 10px;
					animation: listItem 0.5s ease-out;

					// image {
					// 	width: 100%;
					// 	height: 83%;
					// }

					.text {
						width: 98%;
						min-height: 24rpx;
						max-height: 1rem;
						margin-left: 2%;
						display: -webkit-box;
						font-size: 24rpx;
						-webkit-line-clamp: 1; // 这里是关键，设置显示的行数
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;

					}
				}

				@keyframes listItem {
					from {
						transform: translateY(100%);
						opacity: 0;
					}

					to {
						transform: translateY(0);
						opacity: 1;
					}
				}
			}
		}
	}


	.listFootle {
		width: 100%;
		height: 2.5rem;
		font-size: 0.88rem;
		// background: linear-gradient(135deg, #E4E3E8, #FEEDE6);
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		justify-content: center;
		align-items: center;
		color: #6b6b6b;

	}
}
</style>